<template>
  <div class="grid grid-cols-3 gap-3">
    <div v-for="item in list" class="flex group/play rounded-md hover:bg-gray-200">
      <div class="mr-2 w-20 h-fit rounded-md relative">
        <!-- 歌曲图片 -->
        <img :src="item.picUrl" class="w-20 h-16 rounded-md" />
        <!-- 播放按钮 -->
        <div
          class="absolute top-0 left-0 w-full h-full bg-black opacity-0 rounded-md grid place-items-center transition-all duration-200 group-hover/play:opacity-70">
          <svg t="1727677590968" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
            p-id="4038" width="25" height="25">
            <path
              d="M780.8 475.733333L285.866667 168.533333c-27.733333-17.066667-64 4.266667-64 36.266667v614.4c0 32 36.266667 53.333333 64 36.266667l492.8-307.2c29.866667-14.933333 29.866667-57.6 2.133333-72.533334z"
              fill="#fff" p-id="4039"></path>
          </svg>
        </div>
      </div>
      <div class=" w-[calc(100%-100px)] flex flex-col justify-around">
        <div class="w-full flex items-center">
          <!-- 歌名 -->
          <p class="text-sm line-clamp-1 text-ellipsis">{{ item.name }}</p>
        </div>
        <!-- 歌手 -->
        <div class="text-gray-400 text-xs line-clamp-2 text-ellipsis">
          <span v-for="(i, index) in item.song.artists" class="text-nowrap">{{ i.name }} <i class="mr-1"
              v-if="index !== item.song.artists.length - 1">|</i></span>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { newSongType } from '../../view/home/type'
const { list } = defineProps<{
  list: newSongType[]
}>()
</script>
